<template>
  <view class="page-home">
    <view class="w-100 top0 left0 h400">
      <swiper
        class="swiper w-100 h400"
        @change="change"
        :indicator-dots="indicatorDots"
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
      >
        <swiper-item
          @click="previewImg(item)"
          v-for="item in list"
          :key="item.id"
        >
          <ImageFile :url="item.thumbnail" className="w-100 h-100" />
        </swiper-item>
      </swiper>
    </view>
    <view class="title-info">
      <view class="title">
        <text>{{ orgInfo.name }}</text>
        <text class="tag" v-if="orgInfo.resource.type">{{ orgInfo.resource.type }}</text>
      </view>
      <view class="title-msg" v-if="orgInfo.resource.msg">{{ orgInfo.resource.msg }}</view>
      <view class="time-adrees flex-between no-center">
        <view class="time">
          <view class="mini-title">营业时间</view>
          <view class="time-text">{{ orgInfo.resource.tradeTime || "-" }}</view>
        </view>
        <view class="adrees flex-between">
          <view class="left">
            <view class="mini-title">景区地址</view>
            <view class="adrees-text flex-between">
              <text class="msg">{{ orgInfo.address || "-" }}</text>
              <image
                @click="conpyText(orgInfo.address)"
                class="copy-icon"
                :src="require('../../static/user/copy-icon.png')"
              />
            </view>
          </view>
          <view class="right" @click="handleNav">
            <image
              class="navigate-icon"
              :src="require('../../static/user/navigate-icon.png')"
            />
            <text>导航</text>
          </view>
        </view>
      </view>
    </view>
    <view class="page-line"></view>
    <view class="page-title">景点介绍</view>
    <view class="adrees-info content-text">
      <!-- <ImageFile
        v-if="list.length"
        :url="list[list.length - 1].thumbnail"
        className="bg"
      /> -->
      <!-- <view style="text-align: justify" v-html="orgInfo.describes"> </view> -->
      <text style="word-break: break-word; white-space: pre-wrap">
        {{ orgInfo.resource.describes || "-" }}</text
      >
    </view>
    <view class="page-title">开放时间</view>
    <view class="open-time content-text">
      <text style="word-break: break-word; white-space: pre-wrap"
        >{{ orgInfo.resource.openTime || "-" }}
      </text>
    </view>
    <view class="page-title" v-if="orgInfo.resource.treatment">优待政策</view>
    <view class="content-text" v-if="orgInfo.resource.treatment">
      <text style="word-break: break-word; white-space: pre-wrap">
        {{ orgInfo.resource.treatment || "-" }}</text
      >
      <!-- <view style="text-align: justify" v-html="orgInfo.treatment"> </view> -->
      <!-- <textarea
        :maxlength="-1"
        disabled
        :auto-height="true"
        :value="orgInfo.treatment"
      ></textarea> -->
      <!-- <u-parse :content="orgInfo.treatment"></u-parse> -->
    </view>
    <view class="page-title" v-if="orgInfo.resource.facilities">景区设施</view>
    <view class="content-text flex-between" v-if="orgInfo.resource.facilities">
      {{ orgInfo.resource.facilities || "-" }}
    </view>
    <view class="page-title" v-if="orgInfo.resource.traffic">交通信息</view>
    <view class="content-text" v-if="orgInfo.resource.traffic">
      <view>{{ orgInfo.resource.traffic || "-" }}</view>
    </view>
    <view class="page-title" v-if="orgInfo.resource.notice">温馨提示</view>
    <view class="content-text" v-if="orgInfo.resource.notice">
      <text style="word-break: break-word; white-space: pre-wrap">
        {{ orgInfo.resource.notice || "-" }}</text
      >
      <!-- <textarea
        :auto-height="true"
        :maxlength="-1"
        disabled
        :value="orgInfo.notice"
      ></textarea> -->
      <!-- <u-parse :content="orgInfo.notice"></u-parse> -->
    </view>
    <view class="page-title">景区咨询热线</view>
    <view class="content-text">
      <view class="flex-between">
        <text>{{ orgInfo.contactMobile || "-" }}</text>
        <image
          @click="openPhone"
          class="phone-icon"
          :src="require('../../static/user/phone-icon.png')"
        />
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
import { banner_list } from "../../api/mall.js";
import ImageFile from "../../components/img_file.vue";
import infoData from "./infoData";
export default {
  components: {
    ImageFile,
  },
  data() {
    return {
      indicatorDots: true,
      autoplay: true,
      interval: 80000,
      duration: 500,
      list: [],
      baseUrl: `${uni.getStorageSync("file") || ""}/file`,
      infoData,
    };
  },
  props: {
    orgInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    orgInfo(newVal) {
      console.log(newVal, "orgInfo------");
    },
  },
  computed: {
    ...mapState("user", ["isLogin"]),
  },
  created() {
    this.getBanberList();
    const orgId = uni.getStorageSync("orgId");
    if (!orgId) {
      // uni.showToast({
      //   title: "请登录",
      //   icon: "none",
      // });
      setTimeout(() => {
        uni.reLaunch({
          url: "/pages/login/index",
        });
      }, 1000);
      return;
    }
  },
  methods: {
    openPhone() {
      uni.makePhoneCall({
        phoneNumber: this.orgInfo.contactMobile, //电话号码
        success: function (e) {
          console.log(e);
        },
        fail: function (e) {
          console.log(e);
        },
      });
    },
    change(e) {
      this.$forceUpdate();
      this.current = e.detail.current;
    },
    async getBanberList() {
      if (this.isLogin) {
        const { code, body } = await banner_list({ goodsType: "ACTIVITY" });
        if (code === "0") {
          this.list = body.filter((item) => item.enabled);
        }
        console.log(111111111, this.baseUrl);
      }
    },
    conpyText(val) {
      wx.setClipboardData({
        //准备复制的数据
        data: val,
        success: function (res) {
          wx.showToast({
            title: "复制成功",
            icon: "none",
          });
        },
      });
    },
    handleNav() {
      uni.openLocation({
        latitude: this.orgInfo.latitude ? Number(this.orgInfo.latitude) : "",
        longitude: this.orgInfo.longitude ? Number(this.orgInfo.longitude) : "",
        name: this.orgInfo.name,
        address: this.orgInfo.adrees,
        success: function () {
          console.log("success");
        },
        fail: function (err) {
          console.log(err);
        },
      });
    },
    previewImg(item) {
      uni.previewImage({
        current: this.baseUrl + item.thumbnail,
        urls: this.list.map((v) => this.baseUrl + v.thumbnail),
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-home {
  background-color: #fff;
  height: auto;
  .title-info {
    padding: 20rpx;
    .title {
      font-size: 44rpx;
      font-weight: bold;
      display: flex;
      align-items: center;
      .tag {
        font-size: 22rpx;
        background-color: #f2f2f2;
        color: #666;
        margin-left: 20rpx;
      }
    }
    .title-msg {
      margin-top: 10rpx;
      font-size: 22rpx;
      color: #666;
    }
    .time-adrees {
      margin-top: 20rpx;
      font-size: 22rpx;
      background-color: #f7f8fa;
      .time {
        width: 30%;
        background-color: #f7f8fa;
        border-radius: 10rpx;
        padding: 20rpx;
        .time-text {
          color: #666;
        }
      }
      .adrees {
        border-left: 10rpx solid #fff;
        background-color: #f7f8fa;
        border-radius: 10rpx;
        padding: 20rpx;
        flex: 1;
        .left {
          .adrees-text {
            margin-right: 10rpx;
            .msg {
              color: #666;
            }
            .copy-icon {
              height: 20rpx;
              width: 20rpx;
              margin-left: 5rpx;
            }
          }
        }
        .right {
          display: flex;
          flex-direction: column;
          align-items: center;
          color: #666;
          flex-shrink: 0;
          .navigate-icon {
            width: 30rpx;
            height: 30rpx;
          }
        }
      }
      .mini-title {
        font-size: 30rpx;
        font-weight: bold;
        margin-bottom: 5rpx;
      }
    }
  }
  .page-line {
    height: 10rpx;
    background-color: #f7f8fa;
  }
  .page-title {
    margin: 50rpx 0 24rpx 0;
    font-size: 32rpx;
    font-weight: bold;
    padding: 0 30rpx;
  }
  .adrees-info {
    font-size: 26rpx;
    color: #666;
    padding: 0 30rpx;
    line-height: 40rpx;
    .bg {
      height: 300rpx;
      width: 100%;
      margin-bottom: 20rpx;
      background-size: cover;
      background-repeat: no-repeat;
    }
  }
  .content-text {
    font-size: 26rpx;
    color: #666;
    padding: 0 30rpx;
    line-height: 40rpx;
  }
  .phone-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 50rpx;
  }
}
textarea {
  width: 100%;
  line-height: 16rpx;
  overflow-y: hidden;
}
.no-center {
  align-items: flex-start;
}
</style>
